<template>
  <el-card>
    <div class="table">

      <!-- 表格 -->
      <el-table v-loading="loading" :data="storeList" style="width: 100%">
        <el-table-column v-for="item in storeTableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width ? item.width : 125" :sortable="item.sortable" />
        <!-- 注册资金 -->
        <el-table-column prop="registeredCapital" label="注册资金" width="110">
          <template v-slot="scope">
            {{ storeList[scope.$index].registeredCapital.toFixed(2) }}
          </template>
        </el-table-column>
        <!-- 店铺状态 -->
        <el-table-column :filters="[{ text: '已开业', value: 1 }, { text: '已关闭', value: 0 }]" prop="status" label="店铺状态"
          :filter-method="filterTag" width="100">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.status === 1" type="success">已开业</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 0" type="danger">已关闭</el-tag>
          </template>
        </el-table-column>
        <!-- 销售商品类别 -->
        <el-table-column prop="category" label="所售商品类别" width="600">
          <template v-slot="scope">
            <el-tag v-for="item in scope.row.category" style="margin-left: 5px; margin-top: 5px;">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="() => { getStoreDetail(scope.$index); dialogVisible = true }">详情
            </el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>

  <!-- 查看商店详情的模态框 -->
  <el-dialog v-model="dialogVisible" title="查看商店详情" width="50%">

    <!-- 商店详细信息展示表格 -->
    <el-descriptions :column="1" size="default" border>
      <el-descriptions-item label="店铺ID" label-align="center" align="center">
        {{ storeDetail.store.storeId }}
      </el-descriptions-item>
      <el-descriptions-item label="店名" label-align="center" align="center">
        {{ storeDetail.store.storeName }}
      </el-descriptions-item>
      <el-descriptions-item label="所售商品类别" label-align="center" align="center">
        <el-tag v-for="item in storeDetail.store.category" style="margin-left: 5px; margin-top: 5px;">
          {{ item }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="店主用户ID" label-align="center" align="center">
        {{ storeDetail.store.userId }}
      </el-descriptions-item>
      <el-descriptions-item min-width="130px" label="店主身份证号" label-align="center" align="center">
        {{ storeDetail.store.idCardNumber }}
      </el-descriptions-item>
      <el-descriptions-item label="商店状态" label-align="center" align="center">
        <el-tag size="large" v-if="storeDetail.store.status === 1" type="success">已开业</el-tag>
        <el-tag size="large" v-else-if="storeDetail.store.status === 0" type="danger">已关闭</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="商店图片" label-align="center" align="center">
        <el-image v-for="item in storeDetail.store.pictures.map(img_url_pre)" @dragstart.prevent
          style="width: 100px; height: 100px; margin-right: 10px; border-radius: 5px;" :src="item" :zoom-rate="1.2"
          :preview-src-list="storeDetail.store.pictures.map(img_url_pre)" fit="cover" />
      </el-descriptions-item>
      <el-descriptions-item label="商店简介" label-align="center" align="center">
        {{ storeDetail.store.storeProfile }}
      </el-descriptions-item>
      <el-descriptions-item label="备案地址" label-align="center" align="center">
        {{ storeDetail.store.filingAddress }}
      </el-descriptions-item>
      <el-descriptions-item label="注册资金" label-align="center" align="center">
        {{ storeDetail.store.registeredCapital }}
      </el-descriptions-item>
      <el-descriptions-item label="注册日期" label-align="center" align="center">
        {{ storeDetail.store.registrationDate }}
      </el-descriptions-item>
      <el-descriptions-item label="商店账户ID" label-align="center" align="center">
        {{ storeDetail.store.accountId }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 底部的按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'
import img_url_pre from '../../../utils/img_url_filter';

const { proxy } = getCurrentInstance();

let storeList = ref([]);

// 控制表格加载遮罩窗是否出现
let loading = ref(false);

const storeTableLabel = reactive([
  {
    prop: "storeId",
    label: "店铺ID",
    width: 180,
    sortable: true,
  },
  {
    prop: "storeName",
    label: "店铺名",
    width: 180
  },
  {
    prop: "userId",
    label: "店主用户ID",
    width: 190,
    sortable: true,
  },
  {
    prop: "idCardNumber",
    label: "店主身份证号",
    width: 180,
  },
  {
    prop: "registrationDate",
    label: "注册日期",
    sortable: true,
  },
]);

let config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

const getStoreList = async () => {
  // 开启加载遮罩
  loading.value = true;
  // 发起请求
  let res = await proxy.$api.store.getStoreList({
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  storeList.value = res.data.storeList
  config.total = res.data.total
  // 关闭加载遮罩
  loading.value = false;
};

const changePage = (page) => {
  // 更新当前页码
  config.current = page
  getStoreList()
}

let filterTag = (value, row) => {
  return row.status === value;
}

onMounted(() => {
  getStoreList();
});

// 控制模态框的显示和隐藏
const dialogVisible = ref(false)

let storeDetail = reactive({
  store: {
    "storeId": "",
    "userId": "",
    "storeName": "",
    "category": [],
    "idCardNumber": "",
    "storeProfile": "",
    "filingAddress": "",
    "registeredCapital": 0.00,
    "registrationDate": "",
    "pictures": [],
    "accountId": "",
    "status": 1
  }
});

// 这里直接用索引号找到storeList中的信息即可
const getStoreDetail = (index) => {
  storeDetail.store = storeList.value[index];
}

</script>

<style lang="less" scoped>
.table {
  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>